<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
  <title>添加入住人 - 活力长者社区</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
  <style>
    .occupant-container {
      max-width: 800px;
      margin: 0 auto;
      padding: 30px;
    }

    .occupant-header {
      margin-bottom: 30px;
    }

    .occupant-card {
      background-color: white;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.05);
      padding: 25px;
      margin-bottom: 25px;
    }

    .card-title {
      font-size: 1.2rem;
      font-weight: 600;
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: 1px solid #e9ecef;
    }

    .form-label {
      font-weight: 500;
    }

    .btn-save {
      background-color: #28a745;
      color: white;
      padding: 10px 25px;
      border-radius: 5px;
    }

    .btn-save:hover {
      background-color: #218838;
      color: white;
    }

    .btn-cancel {
      background-color: #6c757d;
      color: white;
      padding: 10px 25px;
      border-radius: 5px;
      margin-right: 10px;
    }

    .btn-cancel:hover {
      background-color: #5a6268;
      color: white;
    }
  </style>
</head>
<body>
<c:import url="header.jsp" />

<div class="occupant-container">
  <div class="occupant-header">
    <h2>添加入住人</h2>
    <p class="text-muted">为您的房产登记新的入住人信息</p>
  </div>

  <c:if test="${not empty error}">
    <div class="alert alert-danger">${error}</div>
  </c:if>

  <form action="AddOccupantServlet" method="post">
    <div class="occupant-card">
      <h3 class="card-title">选择房产</h3>
      <div class="mb-4">
        <label class="form-label">选择房产</label>
        <select class="form-select" name="houseId" required>
          <option value="">-- 请选择房产 --</option>
          <c:forEach items="${purchasedHouses}" var="house">
            <option value="${house.houseId}">
                ${house.houseName} - ${house.buildingNumber}栋${house.unitNumber}单元${house.roomNumber}
            </option>
          </c:forEach>
        </select>
      </div>
    </div>

    <div class="occupant-card">
      <h3 class="card-title">入住人信息</h3>
      <div class="row">
        <div class="col-md-6 mb-3">
          <label class="form-label">姓名</label>
          <input type="text" class="form-control" name="occupantName" required>
        </div>
        <div class="col-md-6 mb-3">
          <label class="form-label">身份证号</label>
          <input type="text" class="form-control" name="idCard" required>
        </div>
      </div>

      <div class="row">
        <div class="col-md-3 mb-3">
          <label class="form-label">年龄</label>
          <input type="number" class="form-control" name="age" min="1" max="120" required>
        </div>
        <div class="col-md-3 mb-3">
          <label class="form-label">性别</label>
          <select class="form-select" name="gender" required>
            <option value="">-- 请选择 --</option>
            <option value="男">男</option>
            <option value="女">女</option>
          </select>
        </div>
        <div class="col-md-6 mb-3">
          <label class="form-label">与您的关系</label>
          <select class="form-select" name="relationship" required>
            <option value="">-- 请选择 --</option>
            <option value="父母">父母</option>
            <option value="配偶">配偶</option>
            <option value="子女">子女</option>
            <option value="亲属">亲属</option>
            <option value="其他">其他</option>
          </select>
        </div>
      </div>

      <div class="mb-3">
        <label class="form-label">入住类型</label>
        <select class="form-select" name="residenceType" required>
          <option value="">-- 请选择 --</option>
          <option value="长期居住">长期居住</option>
          <option value="短期照料">短期照料</option>
          <option value="康复疗养">康复疗养</option>
        </select>
      </div>
    </div>

    <div class="d-flex justify-content-end">
      <a href="ViewOccupantsServlet" class="btn btn-cancel">取消</a>
      <button type="submit" class="btn btn-save">添加入住人</button>
    </div>
  </form>
</div>

<c:import url="footer.jsp" />

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>